import {
  Form,
  Button,
  Input,
  Row,
  Col
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { FormItem } from '../data.d';
const FormItem = Form.Item;
import BizParams from '../utils/BizParams';
import { connect } from 'dva';

export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, formVals?: FormItem) => void;
  handleSave: (values: FormItem) => void;
  data: Partial<FormItem>;
  disabled: boolean;
  loading: boolean;
}

@connect(
  ({
    loading
  }: {
    loading: {
      models: {
        [key: string]: boolean;
      };
    };
  }) => ({
    loading: loading.models.creditLoan,
  }),
)
class CreditLoanForm extends Component<UpdateFormProps> {

  constructor(props: UpdateFormProps) {
    super(props);
  }

  handleResetFields = () => {
    this.props.form.resetFields();
    this.props.handleUpdateModalVisible(false);
  };

  getForm = () => {
    const { form, handleSave } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...fieldsValue };
      handleSave(formVals);
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      data,
      disabled,
      loading
    } = this.props;

    return (
      <div>
        <Form style={{ marginTop: 8 }}>
          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>买家名称</span>}>
                {getFieldDecorator('buyer', {
                  rules: [{ required: true, message: '请填写买家名称' }],
                  initialValue: data.buyer,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>注册号</span>}>
                {getFieldDecorator('registerNo', {
                  rules: [{ required: true, message: '请填写注册号' }],
                  initialValue: data.registerNo,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>买家地址</span>}>
                {getFieldDecorator('address', {
                  rules: [{ required: true, message: '请填写买家地址' }],
                  initialValue: data.address,
                })(<Input maxLength={500} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>买家联系人(职位)</span>}>
                {getFieldDecorator('linkman', {
                  rules: [{ required: true, message: '请填写买家联系人' }],
                  initialValue: data.linkman,
                })(<Input maxLength={500} disabled={disabled} placeholder="示例：张三(总经理)" />)}
              </FormItem>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>联系人邮箱</span>}>
                {getFieldDecorator('email', {
                  rules: [{ required: true, message: '请填写联系人邮箱' }],
                  initialValue: data.email,
                })(<Input maxLength={100} disabled={disabled} placeholder="请输入公司邮箱" />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>联系人电话</span>}>
                {getFieldDecorator('phone', {
                  rules: [{ required: true, message: '请填写联系人电话' }],
                  initialValue: data.phone,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>是否存在历史交易</span>}>
                {getFieldDecorator('hisTransactions', {
                  rules: [{ required: true, message: '请填写是否存在历史交易' }],
                  initialValue: data.hisTransactions,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>买家网址</span>}>
                {getFieldDecorator('website', {
                  initialValue: data.website,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>运输方式</span>}>
                {getFieldDecorator('transport', {
                  rules: [{ required: true, message: '请填写运输方式' }],
                  initialValue: data.transport,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>出口商品名称</span>}>
                {getFieldDecorator('commodity', {
                  rules: [{ required: true, message: '请填写出口商品名称' }],
                  initialValue: data.commodity,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>付款方式</span>}>
                {getFieldDecorator('paymentType', {
                  rules: [{ required: true, message: '请填写付款方式' }],
                  initialValue: data.paymentType,
                })(<Input maxLength={100} placeholder="示例:OA/90天(付款方式/付款期限)" disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>年销售量</span>}>
                {getFieldDecorator('currentTurnover', {
                  rules: [{ required: true, message: '请填写年销售量' }],
                  initialValue: data.currentTurnover,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>所需信用额度</span>}>
                {getFieldDecorator('creditLimit', {
                  rules: [{ required: true, message: '请填写所需信用额度' }],
                  initialValue: data.creditLimit,
                })(<Input maxLength={100} placeholder="示例 金额+币种" disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>预计年销售额</span>}>
                {getFieldDecorator('expectedTurnover', {
                  rules: [{ required: true, message: '请填写预计年销售额' }],
                  initialValue: data.expectedTurnover,
                })(<Input maxLength={100} placeholder="示例 金额+币种" disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>供应商名称</span>}>
                {getFieldDecorator('clientName', {
                  rules: [{ required: true, message: '请填写供应商名称' }],
                  initialValue: data.clientName,
                })(<Input maxLength={100} placeholder="中国大陆的生产企业或贸易商" disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>供应商地址</span>}>
                {getFieldDecorator('clientAddress', {
                  rules: [{ required: true, message: '请填写供应商地址' }],
                  initialValue: data.clientAddress,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>供应商负责人</span>}>
                {getFieldDecorator('clientChargePerson', {
                  rules: [{ required: true, message: '请填写供应商负责人' }],
                  initialValue: data.clientChargePerson,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>负责人电话</span>}>
                {getFieldDecorator('clientPhone', {
                  rules: [{ required: true, message: '请填写负责人电话' }],
                  initialValue: data.clientPhone,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>负责人邮箱</span>}>
                {getFieldDecorator('clientEmail', {
                  rules: [{ required: true, message: '请填写负责人邮箱' }],
                  initialValue: data.clientEmail,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>供应商网址</span>}>
                {getFieldDecorator('clientWebsite', {
                  initialValue: data.clientWebsite,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <Button style={{ display: disabled ? 'none' : 'inline-block' }} key="forward" type="primary" loading={loading} onClick={() => this.getForm()}>提交申请</Button>
              <Button key="cancel" style={{ marginTop: 8, marginLeft: 8 }} onClick={() => this.handleResetFields()}>返回</Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default Form.create<UpdateFormProps>()(CreditLoanForm);
